<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title></title> 
<link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/uimaker/icon.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/providers1.css">
</head> 
<body>
    <div class="container">
       <table id="dg" title="" style="width:100%;"
			data-options="
				rownumbers: true,
				singleSelect: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				pagination:true,
				url: '${pageContext.request.contextPath}/order/data',
				method: 'get',
				toolbar: '#tb'
			">
		<thead>
			<tr>
				<th data-options="field:'ajOrderId',width:80">订单号</th>
				<th data-options="field:'sellerId',width:60,formatter:formatSeller">所属商家</th>
				<th data-options="field:'buyerName',width:60">车主</th>
				<th data-options="field:'buyerMobile',width:80">手机</th>
				<th data-options="field:'buyerAddress',width:80">地址</th>
				<th data-options="field:'buyerCar',width:80">车型</th>
				<th data-options="field:'price',width:80,align:'right',formatter:formatPrice">价格</th>
				<th data-options="field:'state',width:80,formatter:formatState">状态</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:0 30px;">
		<div class="conditions">
			<span class="con-span">订单号: </span><input class="easyui-textbox" type="text" name="ajOrderId" style="width:166px;height:35px;line-height:35px;"></input>
			<span class="con-span">所属商家: </span><input class="easyui-combobox" type="text" name="sellerId" data-options="url:'${pageContext.request.contextPath}/seller/getSellers',method:'get',valueField:'id',textField:'name',panelHeight:'auto'" style="width:166px;height:35px;line-height:35px;"></input>
			<a href="#" class="easyui-linkbutton search-btn" iconCls="icon-search" data-options="selected:true">查询</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-reload">重置</a>
			<a href="#" class="easyui-linkbutton more" iconCls="icon-more">更多</a>
		</div>
		<div class="conditions hide">
			<span class="con-span">车主: </span><input class="easyui-textbox" type="text" name="buyerName" style="width:166px;height:35px;line-height:35px;"></input>
			<span class="con-span">下单时间: </span>
			<input class="easyui-datebox" type="text" name="beginDate" data-options="editable:true" style="width:166px;height:35px;line-height:35px;"></input>
			<input class="easyui-datebox" type="text" name="endDate" data-options="editable:true" style="width:166px;height:35px;line-height:35px;"></input>
		</div>
        <div class="opt-buttons">
            <a href="#" class="easyui-linkbutton add-btn" data-options="selected:true">新增</a>
        	<a href="#" class="easyui-linkbutton edit-btn">修改</a>
        	<a href="#" class="easyui-linkbutton del-btn">删除</a>
        	<a href="#" class="easyui-linkbutton excel-in">批量导入</a>
        	<a href="${pageContext.request.contextPath}/order/excelout" class="easyui-linkbutton excel-out">批量导出</a>
        </div>
      </div>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:500px;height:420px;padding:10px 20px"
		data-options="buttons:'#dlg-buttons',closed:true">
		<form id="form0" method="post">
				<input type="hidden" name="id"/>
		      	<table class="kv-table">
					<tbody>
						<tr>
							<td class="kv-label">所属商家</td>
							<td class="kv-content">
								<input name="sellerId" class="easyui-combobox" 
									data-options="required:true,url:'${pageContext.request.contextPath}/seller/getSellers',method:'get',valueField:'id',textField:'name',panelHeight:'auto'"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">订单号</td>
							<td class="kv-content">
								<input name="ajOrderId" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">车主</td>
							<td class="kv-content">
								<input name="buyerName" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">手机</td>
							<td class="kv-content">
								<input name="buyerMobile" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">收货地址</td>
							<td class="kv-content">
								<input name="buyerAddress" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">车型</td>
							<td class="kv-content">
								<input name="buyerCar" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">安装产品</td>
							<td class="kv-content">
								<input name="buyerProduct" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">安装备注</td>
							<td class="kv-content">
								<input name="installRemark" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">价格</td>
							<td class="kv-content">
								<input name="price" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
					</tbody>
				</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton save-btn">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
	<div id="dlg1" class="easyui-dialog" style="width:500px;height:420px;padding:10px 20px"
		data-options="buttons:'#dlg-buttons1',closed:true">
		<form id="form1" method="post" enctype="multipart/form-data">
		      	<table class="kv-table">
					<tbody>
						<tr>
							<td class="kv-label">所属商家</td>
							<td class="kv-content">
								<input name="sellerId" class="easyui-combobox" 
									data-options="required:true,url:'${pageContext.request.contextPath}/seller/getSellers',method:'get',valueField:'id',textField:'name',panelHeight:'auto'"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">请选择Excel</td>
							<td class="kv-content">
								<input name="excel" class="easyui-filebox" data-options="required:true,prompt:'选择文件',buttonText:'选择'"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">模板</td>
							<td class="kv-content">
								<a href="${pageContext.request.contextPath}/static/excel/model.xlsx">请下载本模板进行导入</a>
							</td>
						</tr>
					</tbody>
				</table>
		</form>
	</div>
	<div id="dlg-buttons1">
		<a href="#" class="easyui-linkbutton file-submit">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg1').dialog('close')">取消</a>
	</div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
		$(function() {
			$('.excel-in').click(function() {
				$('#dlg1').dialog('open').dialog('setTitle', '批量导入');
			});
			
			$('.file-submit').on('click', function() {
				$('#form1').form('submit', {
					url:'${pageContext.request.contextPath}/order/excelin',
					onSubmit: function(){
						// 手动做校验
            			return $(this).form('validate');
            		},
					success:function(result) {
						result = JSON.parse(result);
						if (result.success === false){
            				$.messager.alert('错误', result.msg, 'error');
            			} else {
            				$('#dlg1').dialog('close'); // 关闭模态框
            				$('#dg').datagrid('reload');
            				// 成功
            				$.messager.show({
            					title: '提示',
            					msg: result.msg
            				})
            			}
					}
				});
			});
		});

		$('.search-btn').click(function() {

			$('#dg').datagrid('load', {
				ajOrderId: $('[name="ajOrderId"]').val(),
				sellerId: $('[name="sellerId"]').val(),
				buyerName: $('[name="buyerName"]').val(),
				beginDate: $('[name="beginDate"]').val(),
				endDate: $('[name="endDate"]').val()
			});


		});
	
	
		var formatPrice = function(value) {
			// 四舍五入法   银行    100.0599999999  100.05
			// Number
			value = new Number(value);
			var result = value.toFixed(2);
			return "<span style='color:red;'>￥</span>" + result;
		}
		
		var formatState = function(value) {
			switch(value) {
				case 0: return "<span style='color:blue'>待派单</span>";
				case 1: return "待安装";
				case 2: return "已核销";
				case 3: return "订单结束";
				default: return "未知";
			}
		}
		var sellers;
		var formatSeller = function(value) {
			if (sellers) {
			} else {
				$.ajax({
					url:'${pageContext.request.contextPath}/seller/getSellers',
					async:false,
					data:{},
					type:'get',
					dataType:'json',
					success: function(data) {
						sellers = data;
					}
				});
			}
			for (var index in sellers) {
				var obj = sellers[index];
				if (obj.id === value) {
					return obj.name;
				}
			}
			return "未知商家";
		}
	
		$(function() {
			$('#dg').datagrid();
			
			$('.add-btn').on('click', function() {
				$('#form0').form('clear');
				$('#dlg').dialog('open').dialog('setTitle', '新增订单');
			});
			
			$('.del-btn').click(() => {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					// 进行删除
					$.messager.confirm(
            				'提示', 
            				'确定要删除吗?', 
            				function(r){
            					if(r === true) {
            						// js => java request ajax
            						$.getJSON(
            								'${pageContext.request.contextPath}/order/del', 
            								{ "id" : row.id }, function(result) {
            									if (result.success === false){
            			            				$.messager.alert('错误', result.msg, 'error');
            			            			} else {
            			            				$('#dlg').dialog('close'); // 关闭模态框
            			            				$('#dg').datagrid('reload'); // 重新加载树
            			            				// 成功
            			            				$.messager.show({
            			            					title: '提示',
            			            					msg: result.msg
            			            				})
            			            			}
            								});
            						
            						
            					}
        			});
					
				} else {
					$.messager.alert('提示', '请选择一条需要删除的记录', 'info');
				}
			});
			
			$('.edit-btn').click(function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					// 进行修改
					$('#form0').form('load', row);
					$('#dlg').dialog('open').dialog('setTitle', '修改订单');
				} else {
					$.messager.alert('提示', '请选择一条需要修改的记录', 'info');
				}
			});

			$(".more").click(function(){
				$(this).closest(".conditions").siblings().toggleClass("hide");
			});
			
			$('.save-btn').on('click', function() {
				// 客户端的校验
				// 提交
				$('#form0').form('submit', {
					url:'${pageContext.request.contextPath}/order/save',
					onSubmit: function(){
						// 手动做校验
            			return $(this).form('validate');
            		},
					success:function(result) {
						result = JSON.parse(result);
						if (result.success === false){
            				$.messager.alert('错误', result.msg, 'error');
            			} else {
            				$('#dlg').dialog('close'); // 关闭模态框
            				$('#dg').datagrid('reload');
            				// 成功
            				$.messager.show({
            					title: '提示',
            					msg: result.msg
            				})
            			}
					}
				});
			});
		});
	</script>
</body> 
</html>
